<template>
  <div id="pickupPage" ref="pickupPage">
    <div class="pickupBox">
      <div class="pickupTitle">制作中</div>
      <div class="numberBox">
        <div v-for="index in 10" :key="index">
          {{
            completingPickupNumber[index - 1]
              ? "B" + completingPickupNumber[index - 1].pickup_number
              : null
          }}
        </div>
      </div>
    </div>
    <div class="pickupBox">
      <div class="pickupTitle">请取餐</div>
      <div class="numberBox">
        <div v-for="index in 10" :key="index">
          {{
            laterPickupNumber[index - 1]
              ? "B" + laterPickupNumber[index - 1].pickup_number
              : null
          }}
        </div>
      </div>
    </div>
    <div class="pickupBox" id="contentBar">
      <h1>- 拾光手作 -</h1>
      <p>用心做出好作品</p>
      <img src="../assets/image/logo.png" mode="aspectFit" />
    </div>
    <el-icon @click="screenChange" id="fullScreen">
      <FullScreen />
    </el-icon>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, onUnmounted, getCurrentInstance } from "vue";
import { initWebSocketHeartCheck } from "../utils/GeneralTool";
import { ElNotification } from "element-plus";
import screenfull from "screenfull";
const { proxy } = getCurrentInstance();
import { useStore } from "vuex";
const store = useStore();
import { useRouter } from "vue-router";
const router = useRouter();
// --WebSocket监控取餐码更新状态--
let ws = null;
let pageDestruction = false; // 页面销毁状态量
const WebSocketHeartCheck = initWebSocketHeartCheck(); // 初始化websocket心跳检测
const connectWebSocketWatchPickupNumber = () => {
  // 连接WebSocket监控取餐码情况函数
  ws = new WebSocket("ws://localhost:3000/order/socket/watchPickupNumber");
  ws.onopen = () => {
    WebSocketHeartCheck.startHeartCheck(ws); // 启动websocket心跳检测
  };
  ws.onmessage = (event) => {
    WebSocketHeartCheck.startHeartCheck(ws); // 启动websocket心跳检测
    let data = event.data === "pong" ? event.data : JSON.parse(event.data);
    // console.log('收到的消息：', data);
    if (data.type === "updatePickupNumber") {
      getPickupNumberData(); // 重新获取取餐码数据
    }
  };
  ws.onclose = () => {
    WebSocketHeartCheck.resetHeartCheck(); // 重置websocket心跳检测
    if (!pageDestruction) connectWebSocketWatchPickupNumber(); // 若页面未销毁，重新连接
  };
  ws.onerror = (error) => {
    WebSocketHeartCheck.resetHeartCheck(); // 重置websocket心跳检测
    ElNotification({
      title: "网络连接出现错误",
      message: error,
      type: "error",
    });
  };
};
connectWebSocketWatchPickupNumber(); // 连接WebSocket监控取餐码情况

// --数据获取--
let laterPickupNumber = ref([]); // 待取餐订单
let completingPickupNumber = ref([]); // 制作中的订单取餐码
const getLaterPickupNumber = () => {
  // 获取最近待取餐的取餐码
  proxy.$api.getLaterPickupNumber().then((res) => {
    laterPickupNumber.value = res;
  });
};
const getCompletingPickupNumber = () => {
  // 获取制作中的订单取餐码
  proxy.$api.getCompletingPickupNumber().then((res) => {
    completingPickupNumber.value = res;
  });
};
const getPickupNumberData = () => {
  // 获取所有取餐码数据
  getLaterPickupNumber(); // 获取待取餐订单
  getCompletingPickupNumber(); // 获取制作中的订单取餐码
};
// --页面高度自适应--
const pickupPage = ref(null);
watch(
  () => store.state.WindowSize,
  () => {
    // 监听窗口大小变化
    pickupPage.value.style.height = store.state.WindowSize.height + "px";
  }
);
// --全屏切换--
const screenChange = () => {
  if (router.currentRoute.value.path === "/AllPickupPage") {
    // 若当前全屏
    router.push({ path: "/pickupPage" });
  } else {
    router.push({ path: "/AllPickupPage" });
    screenfull.toggle();
  }
};
const keyDown = (e) => {
  console.log(e.key);
  if (e.key === "Escape") {
    router.push({ path: "/pickupPage" });
    screenfull.exit();
  }
};
onMounted(() => {
  pickupPage.value.style.height = store.state.WindowSize.height + "px"; // 初始化页面高度
  getPickupNumberData(); // 获取取餐码数据
  if (router.currentRoute.value.path === "/AllPickupPage") {
    // 若当前全屏
    document.addEventListener("keydown", keyDown);
  }
});
onUnmounted(() => {
  pageDestruction = true; // 页面销毁
  ws.close(); // 断开WebSocket连接
  if (router.currentRoute.value.path === "/AllPickupPage") {
    // 若当前全屏
    document.removeEventListener("keydown", keyDown);
  }
});
</script>

<style lang="scss" scoped>
#pickupPage {
  background-color: #ecca9c;
  display: flex;
  // 字体无法选中
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  .pickupBox {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: bold;

    .pickupTitle {
      white-space: nowrap;
    }
  }
  #contentBar {
    color: #fff;
    font-weight: lighter;
    white-space: nowrap;
    h1 {
      color: #ecca9c;
      text-shadow: var(--colorMainText, #fefefe) 1px 0 0,
        var(--colorMainText, #fefefe) 0 1px 0,
        var(--colorMainText, #fefefe) -1px 0 0,
        var(--colorMainText, #fefefe) 0 -1px 0;
    }
    p {
      font-size: medium;
    }
    img {
      max-width: 80%;
      margin-top: 1rem;
    }
  }

  .numberBox {
    margin: 2rem 0;
    height: 80%;
    width: 80%;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: center;

    div {
      background-color: #ecca9c;
      height: 15%;
      width: 40%;
      margin: 1rem;
      border-radius: 20px;
      justify-content: center;
      align-items: center;
      display: flex;
    }
  }
  #fullScreen {
    position: fixed;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
  }
}
</style>
